import React, { Component } from 'react'
import NavHeader from '@/components/NavHeader'
import SearchBtn from '@/components/SearchBtn'

import './style.scss'
import Slider from './ui/Slider'
import connect from './connect'
import Hotcate from './ui/Hotcate'
import GoodFood from './ui/GoodFood'

import { Toast } from 'antd-mobile'

@connect
class Home extends Component {
  state = {
    page: 1,
    goodfood: []
  }
  componentDidMount() {
    // this.props.swiperData.length!=1 && this.props.getHomeSwiperAction()
    Promise.all([this.props.getHomeSwiperAction(), this.props.getHotCateAction(), this.props.getGoodFoodAction()])
      .then(([, , goodfood]) => {
        // 获取promise.all返回过来的数据，更新到本地state中
        this.setState(state => ({ goodfood, page: state.page + 1 }))
      })
      .catch(() => {
        Toast.fail('请求数据异常')
      })
  }

  loadData = async () => {
    let goodfood = await this.props.getGoodFoodAction(this.state.page)
    if (goodfood.length === 0) {
      Toast.info('没有更多的新数据了')
      return false
    }
    this.setState(state => ({ goodfood: [...state.goodfood, ...goodfood], page: state.page + 1 }))
    // this.setState(state => ({ goodfood, page: state.page + 1 }))
    return true
  }

  render() {
    return (
      <div>
        {/* 导航 */}
        <NavHeader left={false} right={false}>
          菜谱首页
        </NavHeader>
        {/* 幻灯片菜单 */}
        <Slider data={this.props.swiperData} />
        {/* 搜索按钮 */}
        <SearchBtn onClick={() => this.props.history.push('/search')} />
        {/* 热门分类 */}
        <Hotcate data={this.props.hotcate} history={this.props.history} />
        {/* 精品好菜 */}
        {/* <GoodFood key={'goodfood_' + this.state.page} data={this.state.goodfood} loadData={this.loadData} /> */}
        {this.state.goodfood.length > 0 && <GoodFood data={this.state.goodfood} loadData={this.loadData} />}
      </div>
    )
  }
}

export default Home
